<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>

	<view class="container">
		<!-- 顶部导航栏 -->

		<!-- 活动封面图 -->
		<view class="cover-container">
			<image src="https://picsum.photos/id/24/800/400" mode="widthFix" class="cover-image" alt="活动封面图"></image>
		</view>

		<!-- 活动信息 -->
		<view class="event-info">
			<h1 class="event-title text13">{{ eventDetail.title }}</h1>

			<!-- 活动基本信息 -->
			<view class="basic-info">
				<view class="info-item text12">日期：{{ eventDetail.date }}</view>
				<view class="info-item text12">时间：{{ eventDetail.time }}</view>
				<view class="info-item text12">地点：{{ eventDetail.location }}</view>
				<view class="info-item text12">人数：{{ eventDetail.quota }}</view>
			</view>

			<!-- 活动介绍 -->
			<view class="event-description">
				<h2 class="section-title text13">活动介绍</h2>
				<view class="content">
					<text class="text11">{{ eventDetail.description }}</text>
				</view>
			</view>

			<!-- 活动流程 -->
			<view class="event-process">
				<h2 class="section-title text13">活动流程</h2>
				<view class="process-list">
					<view class="process-item" v-for="(item, index) in eventDetail.process" :key="index">
						<view class="step">{{ index + 1 }}</view>
						<view class="process-content">
							<text class="text12">{{ item }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons" :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }">
			<wd-button type="info" @click="handleCancel" :disabled="btn_state==1?true:false">
				取消报名
			</wd-button>
			<wd-button @click="handleRegister" :disabled="btn_state==1?true:false">
				{{ isRegistered ? '已报名' : '立即报名' }}
			</wd-button>
		</view>
	</view>
</template>

<script setup>
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
	const fontSizeStore = useFontSizeStore();
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		tabActivityDetailApi
	} from "@/api/volunteer"

	// 活动详情数据
	const eventDetail = ref({
		title: '社区读书分享会',
		date: '2024-06-20',
		time: '19:30-21:00',
		location: '社区活动中心',
		quota: '限30人',
		description: '本次社区读书分享会邀请各位居民分享自己喜爱的书籍，交流阅读心得。无论您喜欢小说、散文、历史还是科普类书籍，都欢迎前来参与。活动将设置自由交流环节，让大家在轻松愉快的氛围中结交志同道合的朋友，一起感受阅读的乐趣。现场将提供茶水和小点心。',
		process: [
			'19:30-19:40 签到入场',
			'19:40-20:30 轮流分享',
			'20:30-21:00 自由交流'
		]
	});

	// 报名状态
	const isRegistered = ref(false);
	// 活动ID
	const eventId = ref('');
	const btn_state = ref("")
const safeAreaInsets = ref({ bottom: 0 })
	// 页面加载时获取参数
	onLoad((options) => {
			const info = uni.getSystemInfoSync()
	safeAreaInsets.value = info.safeAreaInsets || { bottom: 0 }
		btn_state.value = options.type;
		if (options.id) {
			eventId.value = options.id;
			loadEventDetail(options.id);
		}
	});

	// 返回上一页
	const navigateBack = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	// 加载活动详情
	const loadEventDetail = async (id) => {
		uni.showLoading({
			title: '加载中...'
		});
		tabActivityDetailApi({
			id: id
		}).then((res) => {
			console.log(res, 2)
			if (res.code == 200) {
				eventDetail.value = res.data;
				uni.hideLoading()
			}
		})
		try {


			// 模拟API请求
			// await new Promise(resolve => setTimeout(resolve, 800));

			// 实际项目中这里会根据eventId请求后端接口
			console.log('加载活动详情:', eventId.value);


			// 从本地存储中获取报名状态
			// const savedStatus = uni.getStorageSync(`event_${eventId.value}_registered`);
			// if (savedStatus) {
			//     isRegistered.value = savedStatus;
			// }


		} catch (error) {
			console.error('加载活动详情失败:', error);
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			});
		} finally {
			uni.hideLoading();
		}
	};

	// 处理报名
	const handleRegister = async () => {
		try {
			uni.showLoading({
				title: '提交中...'
			});

			// 模拟报名API请求
			await new Promise(resolve => setTimeout(resolve, 1000));

			// 更新报名状态
			isRegistered.value = true;

			// 保存报名状态到本地存储
			uni.setStorageSync(`event_${eventId.value}_registered`, true);

			uni.showToast({
				title: '报名成功',
				icon: 'success'
			});
		} catch (error) {
			console.error('报名失败:', error);
			uni.showToast({
				title: '报名失败，请重试',
				icon: 'none'
			});
		} finally {
			uni.hideLoading();
		}
	};

	// 处理取消报名
	const handleCancel = () => {
		uni.showModal({
			title: '提示',
			content: '确定要取消报名吗？',
			success: async (res) => {
				if (res.confirm) {
					try {
						uni.showLoading({
							title: '处理中...'
						});

						// 模拟取消报名API请求
						await new Promise(resolve => setTimeout(resolve, 800));

						// 更新报名状态
						isRegistered.value = false;

						// 从本地存储移除报名状态
						uni.removeStorageSync(`event_${eventId.value}_registered`);

						uni.showToast({
							title: '已取消报名',
							icon: 'none'
						});
					} catch (error) {
						console.error('取消报名失败:', error);
						uni.showToast({
							title: '操作失败，请重试',
							icon: 'none'
						});
					} finally {
						uni.hideLoading();
					}
				}
			}
		});
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 100rpx;
	}

	/* 导航栏样式 */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		padding: 0 16px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.back-btn {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: 16px;
	}

	.title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.empty {
		width: 44px;
		height: 44px;
	}

	/* 封面图样式 */
	.cover-container {
		width: 100%;
	}

	.cover-image {
		width: 100%;
		height: auto;
	}

	/* 活动信息样式 */
	.event-info {
		flex: 1;
		padding: 16px;
		background-color: #fff;
		/* border-radius: 16px 16px 0 0; */
		margin-top: 10px;
	}

	.event-title {
		font-size: 22px;
		font-weight: bold;
		color: #333;
		margin-bottom: 16px;
		line-height: 1.3;
	}

	/* 基本信息样式 */
	.basic-info {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 16px;
		margin-bottom: 24px;
		color: #666;
		font-size: 14px;
	}

	.info-item {
		padding: 4px 8px;
		background-color: #f5f5f5;
		border-radius: 4px;
	}

	/* 章节标题样式 */
	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 12px;
		padding-bottom: 6px;
		border-bottom: 2px solid #4F46E5;
	}

	/* 活动介绍样式 */
	.event-description {
		margin-bottom: 24px;
	}

	.content {
		color: #555;
		line-height: 1.6;
		font-size: 15px;
	}

	/* 活动流程样式 */
	.event-process {
		margin-bottom: 24px;
	}

	.process-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.process-item {
		display: flex;
		align-items: flex-start;
	}

	.step {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #4F46E5;
		color: #fff;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
		flex-shrink: 0;
	}

	.process-content {
		color: #555;
		font-size: 15px;
		line-height: 1.6;
	}

	/* 操作按钮样式 */
	.action-buttons {
		display: flex;
		gap: 16px;
		padding: 16px;
		background-color: #fff;
		border-top: 1px solid #eee;
		justify-content: center;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>